<template>
  <div class="container">
    <div class="indexBar">
      <van-index-bar highlight-color="#ff9854" :index-list="indexList">
        <van-index-anchor index="热门" />
        <div class="hotCityList">
          <template v-for="cityItem in currentGroup.hotCities" :key="cityItem.cityId">
            <div class="hotItem">
              <span class="title" @click="hotClick(cityItem)">{{ cityItem.cityName }}</span>
            </div>
          </template>
        </div>
        <template v-for="(item, index) in currentGroup.cities" :key="item.group">
          <van-index-anchor :index="item.group" />
          <!-- todo 二次循环 -->
          <template v-for="cityItem in item.cities" :key="cityItem.cityId">
            <van-cell :title="cityItem.cityName" @click="vanClick(cityItem)" />
          </template>
        </template>
      </van-index-bar>
    </div>
  </div>
</template>

<script setup>
import useCityStore from '@/stores/modules/city';
import { computed } from 'vue'
import { useRouter } from 'vue-router';
const props = defineProps({
  currentGroup: {
    type: Object,
    default: () => ({})
  },
  searchValue: {
    type: String,
    default: ''
  }
})
// 向右边筛选表中加入#号
const indexList = computed(() => {
  const list = props.currentGroup.cities.map(item => item.group)
  list.unshift('#')
  return list
})
const router = useRouter()
const cityStore = useCityStore()
// 热门城市点击按钮
const hotClick = (city) => {
  cityStore.currentCity = city
  // 返回上一级
  router.back()
}
// 普通城市点击按钮
const vanClick = (city) => {
  console.log(city)
}
</script>

<style lang="less" scoped>
.container {
  .hotCityList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px;
    padding-right: 25px;

    .hotItem {
      width: 70px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 14px;
      font-size: 12px;
      color: #000;
      line-height: 28px;
      background-color: #fff4ec;
      margin: 6px 0;
    }
  }

}
</style>